<template>
    <view class="cart-container">
        <view class="order-progress">
            <view class="progress-avatar-group">
                <image v-for="(avatar, index) in progressAvatars" :key="index" :src="avatar" class="progress-avatar">
                </image>
            </view>
            <text class="progress-text">正在进行下单购买...</text>
        </view>
        <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
            <view class="item-select">
                <!-- 使用 :checked 绑定选中状态 -->
                <radio :checked="selectedAll === item.id" :value="item.id" @change="handleItemSelect(item)"></radio>
            </view>
            <image :src="item.image" class="item-image"></image>

            <view class="item-right">
                <view class="item-info">
                    <text class="item-title">{{ item.title }}</text>
                </view>
                <view class="item-right-botton">
                    <view class="item-price">
                        <text class="current-price">¥{{ item.currentPrice }}</text>
                        <text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
                    </view>
                    <view class="item-quantity">
                        <button type="default" size="mini" @click="decreaseQuantity(item)">-</button>
                        <input type="number" :value="item.quantity" class="quantity-input"
                               @input="handleQuantityInput(item, $event)" />
                        <button type="default" size="mini" @click="increaseQuantity(item)">+</button>
                    </view>
                </view>
            </view>

        </view>
        <view class="cart-footer">
            <view class="footer-select">
                <!-- 使用 :checked 绑定选中状态 -->
                <radio :checked="selectedAll === 0" :value="0" @change="handleAllSelect">全选</radio>
            </view>
            <view class="footer-total">
                <text class="total-text">合计：</text>
                <text class="total-price">¥{{ calculateTotalPrice() }}</text>
            </view>
            <button type="primary" class="settle-button" @click="handleSettle">结算</button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟购物车中的商品数据
const cartItems = ref([
    {
        id: 1,
        image: '/static/image/1.jpg',
        title: '富平柿饼特级整箱陕西特产柿子饼独立小包装',
        currentPrice: 79.8,
        originalPrice: 99.8,
        quantity: 1
    },
    {
        id: 2,
        image: '/static/image/2.jpg',
        title: '平阴新玫瑰花养颜好气色',
        currentPrice: 11.9,
        originalPrice: 31.9,
        quantity: 1
    },
    {
        id: 3,
        image: '/static/image/3.jpg',
        title: '正宗唐山黄桃罐头鲜嫩多汁Q弹有嚼劲',
        currentPrice: 29.8,
        originalPrice: 59.8,
        quantity: 2
    },
    {
        id: 4,
        image: '/static/image/4.jpg',
        title: '花牛苹果 新鲜包邮',
        currentPrice: 27.9,
        originalPrice: 62.8,
        quantity: 1
    }
]);

// 模拟订单进度头像
const progressAvatars = ref([
    '/static/icon/grid-card/egg.png',
    '/static/icon/grid-card/doufu.png',
    '/static/icon/grid-card/naicha.png'
]);

// 选中状态
const selectedAll = ref(null);
// 全选状态
const isAllSelected = ref(false);

// 减少商品数量
const decreaseQuantity = (item) => {
    if (item.quantity > 1) {
        item.quantity--;
    }
};

// 增加商品数量
const increaseQuantity = (item) => {
    item.quantity++;
};

// 处理商品数量输入
const handleQuantityInput = (item, event) => {
    const value = parseInt(event.target.value);
    if (!isNaN(value) && value > 0) {
        item.quantity = value;
    }
};

// 处理单个商品选择
const handleItemSelect = (item) => {
    if (selectedAll.value === item.id) {
        selectedAll.value = null;
    } else {
        selectedAll.value = item.id;
    }
    checkAllSelected();
};

// 处理全选操作
const handleAllSelect = () => {
    if (isAllSelected.value) {
        selectedAll.value = null;
        isAllSelected.value = false;
    } else {
        selectedAll.value = 0;
        isAllSelected.value = true;
    }
};

// 检查是否全选
const checkAllSelected = () => {
    isAllSelected.value = cartItems.value.every(item => selectedAll.value === item.id || selectedAll.value === 0);
};

// 计算总价
const calculateTotalPrice = () => {
    return cartItems.value.reduce((total, item) => total + item.currentPrice * item.quantity, 0).toFixed(2);
};

// 结算操作
const handleSettle = () => {
    // 这里可以添加结算逻辑，比如调用接口提交订单等
    console.log('结算操作，提交订单');
};
</script>

<style scoped lang="scss">
.cart-container {
    background-color: #fff;
    padding: 16px;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cart-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.order-progress {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.progress-avatar-group {
    display: flex;
    gap: 4px;
}

.progress-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.progress-text {
    font-size: 14px;
    color: #666;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
}

.item-select {
    margin-right: 8px;
}

.item-image {
    border-radius: 4px;
    width: 80px;
    height: 80px;
    margin-right: 8px;
}

.item-info {
    flex: 1;
}

.item-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
}
.item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.item-right-botton{
    display: flex;
    flex-direction: row;
}

.item-price {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.current-price {
    font-size: 16px;
    color: #f40;
    margin-right: 4px;
}

.original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.item-quantity {
    display: flex;
    align-items: center;
}

.quantity-input {
    width: 40px;
    height: 28px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 4px;
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.footer-select {
    display: flex;
    align-items: center;
}

.footer-total {
    display: flex;
    align-items: center;
}

.total-text {
    font-size: 16px;
    color: #333;
    margin-right: 4px;
}

.total-price {
    font-size: 18px;
    color: #f40;
}

.settle-button {
    width: 200rpx;
    height: 80rpx;
    background-color: #f40;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20rpx;
}
</style>